<template>
	<div class="video-item-container">
		<p>{{ video.title }}</p>
		<video ref="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered" />
		<table>
			<tr>
				<td class="label">session ID：</td>
				<td class="value">{{ video.sessionId }}</td>
				<td class="button" @click="onDetail">会话详情</td>
			</tr>
		</table>
	</div>
</template>

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
export default {
	components: {},
	props: {
		video: {
			type: Object,
			default: () => {}
		},
		index: {
			type: Number,
			default: 0
		},
		sessionId: {
			type: Number,
			default: 0
		},
		total: {
			type: Number,
			default: 0
		},
		isProcessAi: {
			type: Boolean,
			default: false
		},
		originalVideoCount: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			player: null
		};
	},
	mounted() {
		const options = {
			autoplay: false,
			controls: true,
			sources: [
				{
					src: this.video.url,
					type: 'video/mp4'
				}
			],
			width: '353px',
			height: '231px',
			loop: false, // 是否循环播放
			controlBar: {
				volumePanel: {
					inline: false // 将音量横向改为纵向
				},
				// 隐藏全屏按钮
				fullscreenToggle: true
			},
			//双击禁用全屏
			userActions: {
				doubleClick: false
			},
			muted: false
		};
		this.player = videojs(this.$refs.videoPlayer, options, () => {
			this.player.log('onPlayerReady', this);
		});
	},
	beforeDestroy() {
		if (this.player) {
			this.player.dispose();
		}
	},

	methods: {
		onDetail() {
			// 新开页跳转至对应session的会话详情页
			let routerdata = this.$router.resolve({
				name: 'session'
			});
			let newhref = routerdata.href + '?sessionId=' + this.video.sessionId + '&uid=' + window.uid;
			window.open(newhref, '_blank');
		}
	}
};
</script>

<style lang="less" scoped>
.video-item-container {
	color: #333333;
	width: max-content;
	margin-right: 14px;

	p {
		margin: 10px 0;
	}

	table {
		border-collapse: collapse;
		width: 100%;
		margin: 10px 0;

		tr {
			height: 30px;
		}
		.label {
			width: 90px;
		}
		.value {
			width: 200px;
		}
		.button {
			color: #6384fe;
			text-align: right;
			cursor: pointer;
		}
	}
}
</style>
<style>
/*使播放按钮变圆形*/
.video-js .vjs-big-play-button {
	font-size: 2.5em;
	line-height: 2.3em;
	height: 2.5em;
	width: 2.5em;
	-webkit-border-radius: 2.5em;
	-moz-border-radius: 2.5em;
	border-radius: 2.5em;
	background-color: #73859f;
	background-color: rgba(115, 133, 159, 0.5);
	border-width: 0.15em;
	margin-top: -1.25em;
	margin-left: -1.75em;
}
/*暂停时也显示播放按钮*/
.vjs-paused.vjs-has-started .vjs-big-play-button {
	display: block;
}
/*将时长倒计时变当前时间和总时长（这两行不能换位置）*/
.video-js .vjs-time-control {
	display: block;
	min-width: 1.2em;
	text-align: center;
	padding: 0;
}
.video-js .vjs-remaining-time {
	display: none;
}
/*hover进度条无放大效果*/
.video-js .vjs-progress-control:hover .vjs-progress-holder {
	font-size: 10px;
}
/*标记放大效果*/
.video-js .vjs-marker:hover {
	font-size: 1.6em;
}
.video-js .vjs-picture-in-picture-control {
	margin-right: 20px !important;
}
.agent-recorg-text {
	font-size: 13px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	background-color: rgba(0, 0, 0, 0.38);
	color: #ffffff;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 300px;
}
.full-screen {
	position: absolute;
	right: 5px;
	bottom: 6px;
	z-index: 100;
	cursor: pointer;
}
.full-screen img {
	width: 17px;
}
.mark-video-main {
	position: relative;
}
</style>
